<template>
  <view class="list_wrapper">
    <view class="search-bar">
      <uni-search-bar
        @confirm="searchFun"
        bgColor="#ECEFF1"
        radius="24"
        placeholder="搜索酒店或房型"
      ></uni-search-bar>
    </view>
    <view class="list_wrap" v-if="list && list.length > 0">
      <block v-for="item in list" :key="item.typeName">
        <view class="spec_hot" v-if="item.type != 1">{{ item.typeName }}</view>
        <view
          class="item"
          v-for="it in item.items"
          :key="it.id"
          @click="handleToDetail(it.id)"
        >
          <view class="item_top">
            <image :src="img_baseUrl + it.imgAbbrev" mode="aspectFill"></image>
          </view>
          <view class="item_bot">
            <view class="bot_con">
              <view
                class="con_item"
                v-for="room in it.hotelRoomVos"
                :key="room.id"
              >
                <view class="item_lf_img">
					<view class="mask"></view>
                  <image :src="img_baseUrl + room.imgAbbrev" />
                </view>
                <view class="item_rt">
                  <text>{{ room.name }}</text>
                  <view class="price_con">¥{{ (room.price/100).toFixed(2) }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="hotel_det">
            <view class="title">{{ it.name }}</view>
            <view class="loca_wrap">
              <text>{{ it.feature ? it.feature.split('@@').join('、') : ''}}</text>
              <view class="loca">
               <image :src="`${img_baseUrl}/statics/std/static/loc_gray.png`"></image>
                <text>{{it.dis}}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="noData" v-else>
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
import { requestGet } from "@/utils/request.js";
import UniSearchBar from "@/components/searchBar.vue";
import {currentPosition, distance} from '@/utils/index.js';

export default {
  data() {
    return {
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
      searchVal: "",
      list: [],
      originList: [],
      total: 0,
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
	  myPosition: {}
    };
  },
  components: {
    UniSearchBar,
  },
  mounted() {
	  this.getCurrentPos()
    this.getList();
  },
  methods: {
    searchFun(val) {
      this.searchVal = val;
      this.pages.pageNum = 1;
      uni.showLoading({
        title: "加载中",
      });
      this.getList();
    },
    handleToDetail(id) {
      uni.navigateTo({
        url: `/page_index/hotel/detail?id=${id}`,
      });
    },
	async getCurrentPos(){
	   try {
	     this.myPosition = await currentPosition();
	   } catch (error) {
	     console.log('定位失败:', error);
	     return 
	   }
	},
    async getList() {
      const res = await requestGet("/shop/mobile/hotel/list", {
        name: this.searchVal.trim(),
        ...this.pages,
      })
	  if (res.code == 200) {
	    this.total = res.total;
		if(this.myPosition.latitude && this.myPosition.longitude && res.rows && res.rows.length){
			res.rows.map(val => {
				distance(this.myPosition.latitude, this.myPosition.longitude,val.latitude,val.longitude).then(distance => {
				  console.log("distance========", distance)
				  this.$set(val, 'dis', Number(distance) > 1000 ? (Number(distance)/1000).toFixed(1) + 'km' : distance + 'm')
				}).catch(err => {
				  console.log("distance========err", res)
				  this.$set(val, 'dis', '暂未获得位置信息')
				})
			})
		  
		}
	    this.originList =
	      this.pages.pageNum === 1
	        ? res.rows
	        : this.originList.concat(res.rows);
	    this.list = this.pipeList(this.originList);
	    uni.hideLoading();
	  }
        // .then((res) => {
          
        // })
        // .catch((err) => console.log("错误了", err));
    },
    pipeList(list) {
      let json = {};
      list.forEach((item) => {
        const { type, typeName } = item;
        if (!json[type]) {
          json[type] = {
            typeName,
            type,
            items: [],
          };
        }
        json[type].items.push(item);
      });
      return Object.values(json);
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.originList?.length < this.total) {
      this.pages.pageNum = this.pages.pageNum + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.list_wrapper {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .search-bar {
    position: sticky;
    top: 0;
    background-color: #fff;
	z-index: 9;
  }

  .list_wrap {
    box-sizing: border-box;
    padding: 32rpx 32rpx;
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.9076) 76%, rgba(255,255,255,0) 100%);
  }

  .spec_hot {
    font-size: 36rpx;
    font-weight: 500;
    color: #3d3d3d;
    line-height: 50rpx;
    margin: 24rpx 0;
  }

  .item {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 24rpx;
    overflow: hidden;
    background: #fff;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);
    .hotel_det {
      box-sizing: border-box;
      padding: 24rpx;

      .title {
        font-size: 32rpx;
        font-weight: 700;
        color: #3d3d3d;
        line-height: 44rpx;
        margin-bottom: 8rpx;
      }

      .loca_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          display: block;
          font-size: 24rpx;
          font-weight: 400;
          color: #3d3d3d;
          line-height: 32rpx;
        }

        .loca {
          display: flex;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
            display: block;
            margin-right: 8rpx;
          }

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            line-height: 32rpx;
          }
        }
      }
    }

    .item_top {
      width: 100%;
      height: 240rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .item_bot {
      width: 100%;
      display: flex;
      margin-top: 8rpx;

      .bot_con {
        width: 100%;
        display: flex;
        overflow-x: scroll;

        &::-webkit-scrollbar {
          display: none;
        }

        .con_item {
          width: 272rpx;
          height: 176rpx;
          display: flex;
          margin-right: 8rpx;
          position: relative;
			

          .item_lf_img {
			  position: relative;
			.mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
			}
            image {
              width: 272rpx;
              height: 176rpx;
              display: block;
			  
            }
          }

          .item_rt {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 104rpx;
            box-sizing: border-box;
            padding: 16rpx 24rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            text {
              width: 100%;
              font-size: 28rpx;
              font-weight: 400;
              color: #ffffff;
              line-height: 40rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .price_con {
              font-size: 24rpx;
              font-weight: 400;
              color: #ffffff;
              line-height: 34rpx;
            }
          }
        }
      }
    }

    .item_lf {
      width: 200rpx;
      height: 200rpx;
      // border-radius: 12rpx;
      overflow: hidden;
      margin-right: 32rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .item_rt {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;

      .top {
        font-size: 32rpx;
        font-weight: 400;
        color: #000000;
        line-height: 44rpx;
      }

      .mid {
        flex: 1;
        margin: 16rpx 0 56rpx;

        text {
          box-sizing: border-box;
          padding: 0 8rpx;
          height: 40rpx;
          background: #fff0e3;
          // border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #ff7614;
          line-height: 34rpx;
        }
      }

      .bot {
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bot_lf {
          display: flex;
          align-items: center;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            line-height: 30rpx;
          }
        }

        .bot_rt {
          display: flex;
          align-items: baseline;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            line-height: 34rpx;
          }

          .price {
            font-size: 40rpx;
            font-family: D-DIN-Bold;
            font-weight: 700;
            color: #ff7614;
            line-height: 40rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}
</style>
